<template>
    <dl class="detail-type">
        <dt>
            <!-- @click="isShow = !isShow" -->
            <span class="tit">选择模板里的商品</span>
            <el-button v-if="edit" type="primary" size="mini" @click.stop="choiceCus()" :disabled="loading">选择商品
            </el-button>
        </dt>
        <el-collapse-transition>
            <dd v-show="isShow" v-loading="loading">
                <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-con">
                    <el-form-item prop="key" style="margin-right: 25px">
                        <el-input v-model="queryParams.key" placeholder="请输入商品信息" clearable size="small"
                            @input="handleQuery" />
                    </el-form-item>
                </el-form> -->
                <el-table border v-loading="loading" :data="selectList" ref="goodsList" v-tableHeight
                    :height="selectList && selectList.length > 0 ? '452px' : '120px'">
                    <el-table-column label="商品名称" align="center" prop="name" />
                    <el-table-column label="商品编号" align="center" prop="code" width="180" />
                    <el-table-column label="销售价格" align="center" prop="price_selling" />
                    <el-table-column label="商品分类" align="center" prop="cate_name" />
                </el-table>
                <el-dialog title="选择商品" visible v-if="detailShow == 'choice'" @close="close()" width="1000px" append-to-body
                    :close-on-click-modal="false">
                    <!-- :modal-append-to-body="false" -->
                    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-con">
                        <el-form-item prop="key_name" style="margin-right: 25px">
                            <el-input v-model="queryParams.key_name" placeholder="请输入商品名称" clearable size="small"
                                @input="handleQuery" />
                        </el-form-item>
                    </el-form>
                    <el-table border v-loading="diaLoading" :data="tableList" ref="tableList" v-tableHeight
                        :row-key="getRowKeys" :height="tableList && tableList.length > 0 ? '500px' : '120px'"
                        @selection-change="handleSelectionChange" @row-click="toggleSelection">
                        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
                        <el-table-column label="商品名称" align="center" prop="name" />
                        <el-table-column label="商品编号" align="center" prop="code" width="180" />
                        <el-table-column label="销售价格" align="center" prop="price_selling" />
                        <el-table-column label="商品分类" align="center" prop="cate_name" />
                    </el-table>
                    <!-- <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page"
                            @pagination="getList" layout="prev, pager, next, jumper" /> -->
                    <!-- :limit.sync="queryParams.limit" getGoodsLists,-->
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="close()">取 消</el-button>
                        <el-button type="primary" @click="submit" :disabled="diaLoading">确 定</el-button>
                    </span>
                </el-dialog>
            </dd>
        </el-collapse-transition>
    </dl>
</template>
<script>
import { getGoodsLists } from "@/api/goods/goods.js"
import { getSceneInfo } from "@/api/goods/scenarized.js"
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        code: {
            type: String, //add新增edit编辑
            default: ""
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        // suppId: {
        //     type: String,
        //     default: ""
        // }
    },
    components: {

    },
    data() {
        return {
            loading: false,
            isShow: true,
            form: {
            },
            rules: {
                settle_method: [{ required: true, message: '请选择结算方式', trigger: 'change' }],
            },
            diaLoading: false,
            detailShow: '',
            pageCount: 0,
            queryParams: {
                page: 1,
                limit: 900,
                key_status: 1,
            },
            goodsList: [],
            tableList: [],
            selectData: {},
            size: 'mini',
            form: {
                settle_method: 1,
                exch_rate: null,
            },
            edit: this.handleShow == "detail" ? false : true,
            selectList: [],
            GoodList: [],
            items: []
        }
    },
    // watch: {
    //     'selectList'(val) {
    //         console.log(val, 'val')
    //         // handler(val) {
    //         if (val) {
    //             this.$nextTick(() => {
    //                 this.handleSelectedDataChange();
    //             });
    //         }
    //     }
    // },
    created() {
        let fun = [
            getGoodsLists(this.queryParams)
        ]
        Promise.all(fun).then(res => {
            this.tableList = res[0].data.lists;
            console.log(this.tableList, 1245455)
            if (this.handleShow == "edit") {
                getSceneInfo({ code: this.code }).then(res => {
                    console.log(res.data.items, "resss")
                    this.selectList = [];
                    for (let i = 0; i < this.tableList.length; i++) {
                        const obj = this.tableList[i];
                        const isEqual = res.data.items.some(item => item === obj.code);
                        if (isEqual) {
                            this.selectList.push(obj);
                        }
                    }
                })
            }
        })
    },
    methods: {
        choiceCus() {
            this.selectData = this.selectList
            console.log(this.selectData, 'chushi')
            setTimeout(() => {
                this.handleSelectedDataChange();
            }, 1000);// 测试过了，比三秒短的话，还是会报错
            this.detailShow = 'choice'
        },

        toggleSelection(row) {
            this.$refs.tableList.toggleRowSelection(row);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectData = selection;
            console.log(this.selectData, "cccc0")
        },
        // selectData中的值发生变化时同步到选中项
        handleSelectedDataChange() {
            this.selectData.length && this.selectData.forEach((item) => {
                this.$nextTick(() => {
                    const row = this.tableList.find((i) => i.code === item.code);
                    console.log(row, 'row')
                    this.$refs.tableList.toggleRowSelection(row);
                })
            });
        },

        getRowKeys(row) {
            return row.code  // 指定table code
        },
        // onSelectAll() {
        //     this.$refs.tableList.clearSelection();
        // },
        close() {
            // this.queryParams = {
            //     page: 1,
            //     limit: 10,
            //     supp_id: this.suppId
            // }
            this.selectData = {}
            this.goodsList = []
            this.detailShow = ''
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        submit() {
            console.log(this.selectData, "cccc1")
            this.selectList = this.selectData
            console.log(this.selectList, 6666)
            // this.detailShow = ''
            this.close()
        }
    },
}

</script>
<style scoped lang='scss'>
el-input_inner::placeholder {
    color: #000;
}
</style>